<template>
  <div>
    <div class="block">
      <el-button type="primary"> 创建用户 </el-button>
      <el-pagination
        @size-change="pagination.size = $event"
        @current-change="pagination.page = $event"
        :current-page="pagination.page"
        :page-sizes="[20, 40, 80, 100]"
        :page-size="pagination.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="one"
      >
      </el-pagination>
    </div>
    <el-table :data="userlist" height="550" border style="width: 100%">
      <el-table-column prop="id" label="编号" width="180"> </el-table-column>
      <el-table-column prop="name" label="头像" width="180">
        <template v-slot="slot">
          <img :src="slot.row.avatar" />
        </template>
      </el-table-column>
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <el-table-column prop="nickname" label="昵称"> </el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="is_active" label="是否启用账号">
        <template v-slot="slot">
          <el-switch
            v-model="slot.row.is_active"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="date_joined" label="注册时间"> </el-table-column>
      <el-table-column prop="" label="上次登录">
        <template> NaN年前 </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { userlist } from "@/api/index";
import { mapState, mapActions } from "vuex";
export default {
  name: "UserList",
  computed: {
    ...mapState("userlist", ["userList"]),
    params() {
      let obj = {};
      obj = {
        ...this.pagination,
      };
      return obj;
    },
  },
  methods: {
    ...mapActions("userlist", ["getUserlist"]),

    async _getUserList() {
      let {
        data: { results, count },
      } = await userlist(this.params);
      this.userlist = results;
      this.total = count;
    },
  },
  created() {
    this.getUserlist();
    this._getUserList();
    this.$watch("params", this._getUserList, { deep: true });
  },
  data() {
    return {
      pagination: {
        page: 1,
        size: 20,
      },
      total: 0,
      userlist: [],
    };
  },
};
</script>
<style lang="scss" scoped>
img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
}
.one {
  float: right;
}
</style>
